<template>
	<div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">

		<div v-if="showTop" class="top go-mt-0 go-flex-no-wrap">
			<n-space class="go-flex-no-wrap" :size="5">
				<n-ellipsis>
					<n-text>{{ title }}</n-text>
				</n-ellipsis>
				<div class="mt-1">
					<slot name="icon"></slot>
				</div>
			</n-space>
			<n-space class="go-flex-no-wrap" align="center" style="gap: 4px">
				<slot name="top-right"></slot>
				<n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
					<chevron-back-outline-icon></chevron-back-outline-icon>
				</n-icon>
			</n-space>
		</div>

		<div class="content" :class="{'content-height-show-top-bottom': showBottom || showTop,'content-height-show-both': showBottom && showTop}">
			<template v-if="disabledScroll">
				<slot></slot>
			</template>
			<template v-else-if="xScroll">
				<n-scrollbar x-scrollable>
					<n-scrollbar>
						<slot></slot>
					</n-scrollbar>
				</n-scrollbar>
			</template>

			<template v-else>
				<n-scrollbar>
					<slot></slot>
				</n-scrollbar>
			</template>
		</div>
		<div v-if="showBottom" class="bottom go-mt-0">
			<slot name="bottom"></slot>
		</div>
		<div class="aside">
			<slot name="aside"></slot>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		title: String,
		showTop: {
			type: Boolean,
			default: true
		},
		showBottom: {
			type: Boolean,
			default: false
		},
		flex: {
			type: Boolean,
			default: false
		},
		// back
		backIcon: {
			type: Boolean,
			default: true
		},
		// 背景深度
		depth: {
			type: Number,
			default: 1
		},
		// x 轴滚动
		xScroll: {
			type: Boolean,
			default: false
		},
		disabledScroll: {
			type: Boolean,
			default: false
		},
	},
	methods:{
		backHandle(){
			this.$emit('back');
		}
	}
}
</script>
<style>
.content{
	height: 100%;
}

</style>
